<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载导航控件</title>
    <link href="http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="mapCon">
    </div>
    <script type="text/javascript">
        console.log('{{csrf_token()}}')
        // var TiandiMap_vec = new ol.layer.Tile({
        //     title: "天地图矢量图层",
        //     source: new ol.source.XYZ({
        //         url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + parent.TiandituKey(),//parent.TiandituKey()为天地图密钥
        //         wrapX: false
        //     })
        // });
        // var Tianditu_cva = new ol.layer.Tile({
        //     title: "天地图矢量注记图层",
        //     source: new ol.source.XYZ({
        //         url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + parent.TiandituKey(),//parent.TiandituKey()为天地图密钥
        //         wrapX: false
        //     })
        // });
        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            controls: ol.control.defaults({
                /** @type {olx.control.AttributionOptions} */
                attributionOptions: ({
                    collapsible: true
                })
            }).extend([
          new ol.control.ZoomToExtent({
              extent: [
                813079.7791264898, 5929220.284081122,
                848966.9639063801, 5936863.986909639
              ]
          })
            ]),
            //地图容器中加载的图层
            // layers: [TiandiMap_vec, Tianditu_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: [0, 0],
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:3857"
            })
        });
    </script>
</body>
</html>
